<template>
  <el-form ref="refForm" :model="formData" label-position="top">
    <el-form-item label="显示格式" prop="dataType">
      <el-radio-group
        v-model="formData.dataType"
        @change="(val) => handelChange(val, 'dataType')"
      >
        <el-radio label="currency"> 金额 </el-radio>
        <el-radio label="number"> 数值 </el-radio>
      </el-radio-group>
    </el-form-item>
    <el-form-item
      label="单位"
      prop="unit"
      v-if="formData.dataType === 'number'"
    >
      <el-input
        @change="handelChange"
        v-model="formData.unit"
        :maxlength="32"
        style="width: 100%"
        placeholder="请输入单位"
      />
    </el-form-item>
    <el-form-item
      label="币种"
      prop="currencyType"
      v-if="formData.dataType === 'currency'"
    >
      <el-select
        v-model="formData.currencyType"
        placeholder="请选择"
        style="width: 100%"
        @change="(val) => handelChange(val, 'currencyType')"
      >
        <el-option label="自定义" value="custom"></el-option>
        <el-option
          :label="i.value"
          :value="i.key"
          :key="index"
          v-for="(i, index) in TABLE_CURRENCY_ENUM"
        >
        </el-option>
      </el-select>
    </el-form-item>
    <el-form-item
      label="自定义币种"
      prop="unit"
      v-if="
        formData.dataType === 'currency' && formData.currencyType === 'custom'
      "
    >
      <el-input
        @change="handelChange"
        v-model="formData.unit"
        style="width: 100%"
        placeholder="请输入币种"
      />
    </el-form-item>
    <el-form-item label="精度" prop="limitNumber">
      <el-input-number
        @change="handelChange"
        style="width: 100%"
        v-model="formData.limitNumber"
        controls-position="right"
        :min="0"
        :max="6"
      ></el-input-number>
    </el-form-item>
    <el-form-item label="显示千位分隔符" prop="showSeparator">
      <el-switch
        @change="handelChange"
        v-model="formData.showSeparator"
      ></el-switch>
    </el-form-item>
    <el-form-item
      label="百分比转换"
      prop="isPercent"
      v-if="formData.dataType === 'number'"
    >
      <el-switch
        @change="handelChange"
        v-model="formData.isPercent"
      ></el-switch>
    </el-form-item>
  </el-form>
</template>
<script>
import { cloneDeep } from "lodash";
import { TABLE_CURRENCY_ENUM } from "@/utils/enum";
export default {
  name: "NumberConfig",
  data() {
    return {
      modelData: {},
      formData: {},
      oldNumberData: {
        unit: "",
        limitNumber: 0,
        showSeparator: false,
        isPercent: false,
      },
      oldCurrencyData: {
        currencyType: "",
        unit: "",
        limitNumber: 0,
        showSeparator: false,
      },
      TABLE_CURRENCY_ENUM,
    };
  },
  methods: {
    init(data) {
      this.formData = {};
      this.modelData = cloneDeep(data);
      this.$set(this.formData, "dataType", data.dataType);
      if (data.dataType === "number") {
        this.$set(this.formData, "unit", data.unit);
        this.$set(this.formData, "limitNumber", data.limitNumber);
        this.$set(this.formData, "showSeparator", data.showSeparator);
        this.$set(this.formData, "isPercent", data.isPercent);
      } else {
        this.$set(this.formData, "currencyType", data.currencyType);
        this.$set(this.formData, "unit", data.unit);
        this.$set(this.formData, "limitNumber", data.limitNumber);
        this.$set(this.formData, "showSeparator", data.showSeparator);
      }
    },

    handelChange(val, action) {
      let config = {};
      if (this.formData.dataType === "number") {
        if (action === "dataType") {
          this.oldCurrencyData = cloneDeep(this.formData);
          this.$set(this.formData, "unit", this.oldNumberData.unit);
          this.$set(
            this.formData,
            "limitNumber",
            this.oldNumberData.limitNumber
          );
          this.$set(
            this.formData,
            "showSeparator",
            this.oldNumberData.showSeparator
          );
          this.$set(this.formData, "isPercent", this.oldNumberData.isPercent);
        }
        config = {
          dataType: this.formData.dataType,
          unit: this.formData.unit,
          limitNumber: this.formData.limitNumber,
          showSeparator: this.formData.showSeparator,
          isPercent: this.formData.isPercent,
          type: 5,
        };
      } else {
        if (action === "dataType") {
          this.oldNumberData = cloneDeep(this.formData);
          this.$set(
            this.formData,
            "currencyType",
            this.oldCurrencyData.currencyType
          );
          this.$set(this.formData, "unit", this.oldCurrencyData.unit);
          this.$set(
            this.formData,
            "limitNumber",
            this.oldCurrencyData.limitNumber
          );
          this.$set(
            this.formData,
            "showSeparator",
            this.oldCurrencyData.showSeparator
          );
        } else if (action === "currencyType") {
          const currencyItem = this.TABLE_CURRENCY_ENUM.find(
            (i) => i.key === val
          ) || { unit: "" };
          this.$set(this.formData, "unit", currencyItem.unit);
        }
        config = {
          dataType: this.formData.dataType,
          currencyType: this.formData.currencyType,
          unit: this.formData.unit,
          limitNumber: this.formData.limitNumber,
          showSeparator: this.formData.showSeparator,
          type: 5,
        };
      }
      this.$emit("changeData", config);
    },
  },
};
</script>
